import Vue from 'vue';
import App from './App.vue';
import router from './router';
import ElementUI from 'element-ui';
import VueI18n from 'vue-i18n';
import { messages } from './components/common/i18n';
import 'element-ui/lib/theme-chalk/index.css'; // 默认主题
// import './assets/css/theme-green/index.css'; // 浅绿色主题
import './assets/css/icon.css';
import './components/common/directives';
import 'babel-polyfill';
import axios from 'axios';
import 'default-passive-events';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import store from './store';

import 'nprogress/nprogress.css';

Vue.prototype.dateFormat = function (dateStr, pattern = "") {
    if (!dateStr) {
        return '';
    }
    var dt = new Date(parseInt(dateStr));
    var y = dt.getFullYear();
    var m = (dt.getMonth() + 1).toString().padStart(2, 0);
    var d = dt
        .getDate()
        .toString()
        .padStart(2, 0);
    if (pattern.toLowerCase() === "yyyy-mm-dd") {
        return `${y}-${m}-${d}`;
    } else {
        var hh = dt
            .getHours()
            .toString()
            .padStart(2, 0);
        var mm = dt
            .getMinutes()
            .toString()
            .padStart(2, 0);

        var ss = dt
            .getSeconds()
            .toString()
            .padStart(2, 0);

        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
    }
}

Vue.prototype.$axios = axios
// 请求超时时间 10分钟
axios.defaults.timeout = 10 * 60 * 1000;
// post请求头
axios.defaults.headers.post['Content-Type'] = "application/json"
axios.defaults.withCredentials = true
// 使用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => {
    console.log(to.meta.title);
    document.title = `${to.meta.title} | ${location.hostname == 'vue.bangning.vip' ?
        '物联网设备管理系统' : location.hostname == 'bm.bangning.vip' ?
            '再生资源商城管理系统' : location.hostname == 'bn.bangning.vip' ?
                '垃圾分类数据管理平台' : '物联网设备管理系统'}`;



    if (to.meta.requireAuth) {
        //未登录
        if (!localStorage.getItem("ms_username")) {
            // 解释过程：第一次打开项目进入/config时 是执行了next()的 会弹出警告
            // 关闭页面 再次进入 由于这里 return 所以 跳转/config时没有执行next() 无警告
            // 假设这里去掉return 跳转 /config时 会按照顺序 
            // 先执行访问/config的next() 发出警告 再执行访问/login的next() 无警告

            return next({
                path: '/login'
            })
        }
    }

    // 已登录的情况再去登录页，跳转至首页
    if (to.name === 'Login') {
        if (localStorage.getItem("ms_username")) {
            return next({
                path: '/'
            })
        }
    }
    next()
});

axios.defaults.baseURL = process.env.VUE_APP_BASE_API;

// 请求拦截器 token必须在拦截器中设置, 
axios.interceptors.request.use(config => {
    let token = store.state.token;
    token && (config.headers.Token = `${token}`);
    config.headers['Accept-Language'] = localStorage.getItem('currentLang') || 'zh-CN'
    return config;
},
    err => {
        return Promise.reject(err);
    })

// 响应拦截器
axios.interceptors.response.use(response => {
    // response.data.code = 401 // => 测试token失效
    if (response.data.code) {
        if (response.data.code === 401 || response.data.code === 403) {
            // 删除登录状态
            localStorage.removeItem("ms_username");
            // token过期了 清除token
            store.commit('DEL_TOKEN');
            Vue.prototype.$message.error({
                message: response.data.msg,
                duration: 1500
            })
            router.replace({
                path: '/login',
            }).catch(err => { })
        }

    }
    return response;
},
    // 接口错误状态处理，也就是说无响应时的处理
    error => {
        return Promise.reject(error) // 如果.then() 有第二个失败函数， 则在失败函数的参数中获取, 并且后面.then继续执行 否则会在catch参数中获取到，并且后面.then不再执行
    })

Vue.config.productionTip = false;
Vue.use(VueI18n);
Vue.use(ElementUI, {
    size: 'small'
});

const i18n = new VueI18n({
    locale: 'zh',
    messages
});

new Vue({
    router,
    i18n,
    store,
    render: h => h(App)
}).$mount('#app');
